﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="meta description">

<title>Single Product</title>

<!--=== Favicon ===-->
<link rel="shortcut icon" href="assets/img/favicon.ico"
	type="image/x-icon" />

<!--== Google Fonts ==-->
<link
	href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700"
	rel="stylesheet">

<!--=== Bootstrap CSS ===-->
<link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
<!--=== Font-Awesome CSS ===-->
<link href="assets/css/vendor/font-awesome.css" rel="stylesheet">
<!--=== Plugins CSS ===-->
<link href="assets/css/plugins.css" rel="stylesheet">
<!--=== Helper CSS ===-->
<link href="assets/css/helper.min.css" rel="stylesheet">
<!--=== Main Style CSS ===-->
<link href="assets/css/style.css" rel="stylesheet">

<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

<!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>


	<!--== Start Header Section ==-->
	<header id="header-area"></header>
	<!--== End Header Section ==-->

	<!--== Start Page Breadcrumb ==-->
	<div class="page-breadcrumb-wrap">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="page-breadcrumb">
						<ul class="nav">
							<li><a href="index.html">Home</a></li>
							<li><a href="shop.html">Shop</a></li>
							<li><a href="#" class="active">MH02-Gray</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--== End Page Breadcrumb ==-->

	<!--== Page Content Wrapper Start ==-->
	<div id="page-content-wrapper">
		<div class="container">
			<div class="row">
				<!-- Single Product Page Content Start -->
				<div class="col-lg-12">
					<div class="single-product-page-content">
						<div class="row">
							<!-- Product Thumbnail Start -->
							<div class="col-lg-5">
								<div class="product-thumbnail-wrap">
									<div class="product-thumb-carousel owl-carousel">
										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="" alt="Product" /></a>
										</div>

										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="" alt="Product" /></a>
										</div>

										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="" alt="Product" /></a>
										</div>

										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="" alt="Product" /></a>
										</div>
									</div>
								</div>
							</div>
							<!-- Product Thumbnail End -->

							<!-- Product Details Start -->
							<div class="col-lg-7">
								<div class="product-details">
									<h2>
										<a class="goodsname" href="single-product.html">MH02-Gray</a>
									</h2>

									<div class="rating">
										<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
											class="fa fa-star"></i> <i class="fa fa-star-half"></i> <i
											class="fa fa-star-o"></i>
									</div>

									<span class="price">$52.00</span>

									<div class="product-info-stock-sku">
										<span class="product-stock-status text-success">In
											Stock</span> <span class="product-sku-status"><strong>SKU</strong>
											MH03</span>
									</div>

									<p class="products-desc">Ideal for cold-weathered training
										worked lorem ipsum outdoors, the Chaz Hoodie promises superior
										warmth with every wear. Thick material blocks out the wind as
										ribbed cuffs and bottom band seal in body heat Lorem ipsum
										dolor sit amet, consectetur adipisicing elit. Enim,
										reprehenderit.</p>

									<div class="shopping-option-item">
										<h4>颜色</h4>
										<ul class="color-option-select d-flex">
											<li class="color-item black">
												<div class="color-hvr">
													<span class="color-fill"></span> <span class="color-name">Black</span>
												</div>
											</li>

											<li class="color-item green">
												<div class="color-hvr">
													<span class="color-fill"></span> <span class="color-name">green</span>
												</div>
											</li>

											<li class="color-item orange">
												<div class="color-hvr">
													<span class="color-fill"></span> <span class="color-name">Orange</span>
												</div>
											</li>
										</ul>
									</div>



									<div class="product-quantity d-flex align-items-center">
										<div class="quantity-field">
											<label for="qty">Qty</label> <input type="number" id="qty"
												min="1" max="100" value="1" />
										</div>

										<a href="cart.html" class="btn btn-cart-large"><i
											class="fa fa-shopping-cart"></i> Add to Cart</a>
									</div>

									<div class="product-btn-group">
										<a href="wishlist.html" class="btn btn-round btn-cart"><i
											class="fa fa-heart"></i></a> <a href="compare.html"
											class="btn btn-round btn-cart"><i class="fa fa-exchange"></i></a>
										<a href="single-product-gruop.html"
											class="btn btn-round btn-cart"><i
											class="fa fa-envelope-o"></i></a>
									</div>
								</div>
							</div>
							<!-- Product Details End -->
						</div>

						<div class="row">
							<div class="col-lg-12">
								<!-- Product Full Description Start -->
								<div class="product-full-info-reviews">
									<!-- Single Product tab Menu -->
									<nav class="nav" id="nav-tab">
										<a class="active" id="description-tab" data-toggle="tab"
											href="#description">Description</a> <a id="reviews-tab"
											data-toggle="tab" href="#reviews">Reviews</a>
									</nav>
									<!-- Single Product tab Menu -->

									<!-- Single Product tab Content -->
									<div class="tab-content" id="nav-tabContent">
										<div class="tab-pane fade show active" id="description">
											<p class="goodsdesription">Stay comfortable and stay in
												the race no matter what the weather's up to. The Bruno
												Compete Hoodie's water-repellent exterior shields you from
												the elements, while advanced fabric technology inside wicks
												moisture to keep you dry.Stay comfortable and stay in the
												race no matter what the weather's up to. The Bruno Compete
												Hoodie's water-repellent exterior shields you from the
												elements, while advanced fabric technology inside wicks
												moisture to keep you dry.Stay comfortable and stay in the
												race no matter what the weather's up to. The Bruno Compete
												Hoodie's water-repellent exterior shields you from the
												elements, while advanced fabric technology inside wicks
												moisture to keep you dry.</p>


										</div>

										<div class="tab-pane fade" id="reviews">
											<div class="row">
												<div class="col-lg-7">
													<div class="product-ratting-wrap">
														<div class="pro-avg-ratting">
															<h4>
																4.5 <span>(Overall)</span>
															</h4>
															<span>Based on 9 Comments</span>
														</div>
														<div class="ratting-list">
															<div class="sin-list float-left">
																<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																	class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																	class="fa fa-star"></i> <span>(5)</span>
															</div>
															<div class="sin-list float-left">
																<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																	class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																	class="fa fa-star-o"></i> <span>(3)</span>
															</div>
															<div class="sin-list float-left">
																<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																	class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i
																	class="fa fa-star-o"></i> <span>(1)</span>
															</div>
															<div class="sin-list float-left">
																<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																	class="fa fa-star-o"></i> <i class="fa fa-star-o"></i>
																<i class="fa fa-star-o"></i> <span>(0)</span>
															</div>
														</div>
														<div class="rattings-wrapper">

															<div class="sin-rattings">
																<div class="ratting-author">
																	<h3>Cristopher Lee</h3>
																	<div class="ratting-star">
																		<i class="fa fa-star"></i> <i class="fa fa-star"></i>
																		<i class="fa fa-star"></i> <i class="fa fa-star"></i>
																		<i class="fa fa-star"></i> <span>(5)</span>
																	</div>
																</div>
																<p>enim ipsam voluptatem quia voluptas sit
																	aspernatur aut odit aut fugit, sed quia res eos qui
																	ratione voluptatem sequi Neque porro quisquam est, qui
																	dolorem ipsum quia dolor sit amet, consectetur,
																	adipisci veli</p>
															</div>

															<div class="sin-rattings">
																<div class="ratting-author">
																	<h3>Nirob Khan</h3>
																	<div class="ratting-star">
																		<i class="fa fa-star"></i> <i class="fa fa-star"></i>
																		<i class="fa fa-star"></i> <i class="fa fa-star"></i>
																		<i class="fa fa-star"></i> <span>(5)</span>
																	</div>
																</div>
																<p>enim ipsam voluptatem quia voluptas sit
																	aspernatur aut odit aut fugit, sed quia res eos qui
																	ratione voluptatem sequi Neque porro quisquam est, qui
																	dolorem ipsum quia dolor sit amet, consectetur,
																	adipisci veli</p>
															</div>

															<div class="sin-rattings">
																<div class="ratting-author">
																	<h3>MD.ZENAUL ISLAM</h3>
																	<div class="ratting-star">
																		<i class="fa fa-star"></i> <i class="fa fa-star"></i>
																		<i class="fa fa-star"></i> <i class="fa fa-star"></i>
																		<i class="fa fa-star"></i> <span>(5)</span>
																	</div>
																</div>
																<p>enim ipsam voluptatem quia voluptas sit
																	aspernatur aut odit aut fugit, sed quia res eos qui
																	ratione voluptatem sequi Neque porro quisquam est, qui
																	dolorem ipsum quia dolor sit amet, consectetur,
																	adipisci veli</p>
															</div>

														</div>
														<div class="ratting-form-wrapper">
															<h3>Add your Comments</h3>
															<form action="#" method="post">
																<div class="ratting-form row">
																	<div class="col-12 mb-4">
																		<h5>Rating:</h5>
																		<div class="ratting-star fix">
																			<i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i>
																			<i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i>
																			<i class="fa fa-star-o"></i>
																		</div>
																	</div>
																	<div class="col-md-6 col-12 mb-4">
																		<label for="name">Name:</label> <input id="name"
																			placeholder="Name" type="text">
																	</div>
																	<div class="col-md-6 col-12 mb-4">
																		<label for="email">Email:</label> <input id="email"
																			placeholder="Email" type="text">
																	</div>
																	<div class="col-12 mb-4">
																		<label for="your-review">Your Review:</label>
																		<textarea name="review" id="your-review"
																			placeholder="Write a review"></textarea>
																	</div>
																	<div class="col-12">
																		<input value="add review" type="submit">
																	</div>
																</div>
															</form>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- Single Product tab Content -->
								</div>
								<!-- Product Full Description End -->
							</div>
						</div>
					</div>
				</div>
				<!-- Single Product Page Content End -->
			</div>
		</div>
	</div>
	<!--== Page Content Wrapper End ==-->

	<!--== Start Newsletter Area ==-->
	<div class="newsletter-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-9 m-auto">
					<!-- Newsletter Content Start -->
					<div
						class="newsletter-content-wrap text-center text-lg-left d-lg-flex">
						<h2>
							<i class="fa fa-envelope-square"></i> Sign up for Newsletter
						</h2>
						<div class="newsletter-form-wrap">
							<form id="subscribe-form" action="assets/php/subscribe.php"
								method="post">
								<input type="email" name="newsletter_email" id="address"
									placeholder="Enter Your Email Address" required />
								<button class="btn" type="submit">Subscribe</button>
							</form>
							<!-- Show Error & Success Message -->
							<div id="subscribeResult"></div>
						</div>
					</div>
					<!-- Newsletter Content End -->
				</div>

				<div class="col-lg-3 m-auto text-center text-lg-right">
					<!-- Social Icons Area Start -->
					<div class="social-icons">
						<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i
							class="fa fa-twitter"></i></a> <a href="#"><i
							class="fa fa-linkedin"></i></a> <a href="#"><i
							class="fa fa-youtube"></i></a>
					</div>
					<!-- Social Icons Area End -->
				</div>
			</div>
		</div>
	</div>
	<!--== End Newsletter Area ==-->

	<!--== Start Footer Area ==-->
	<footer id="footer-area"></footer>
	<!--== End Footer Area ==-->

	<!-- Scroll to Top Start -->
	<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
	<!-- Scroll to Top End -->


	<!--=======================Javascript============================-->
	<!--=== Jquery Min Js ===-->
	<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
	<!--=== Jquery Migrate Min Js ===-->
	<script src="assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
	<!--=== Popper Min Js ===-->
	<script src="assets/js/vendor/popper.min.js"></script>
	<!--=== Bootstrap Min Js ===-->
	<script src="assets/js/vendor/bootstrap.min.js"></script>
	<!--=== Ajax Mail Js ===-->
	<script src="assets/js/ajax-mail.js"></script>
	<!--=== Plugins Min Js ===-->
	<script src="assets/js/plugins.js"></script>

	<!--=== Active Js ===-->
	<script type="text/javascript">
		$("#header-area").load("header");
		$("#footer-area").load("footer");
		var specsid;
		$(function() {
			doGetObjects();
			function doGetObjects() {
				var id = {
					id : getQueryVariable('id')
				};
				var url = "GoodsInfo/getGoodsInfo";
				$.getJSON(url, id, function(result) {
					doHandleResponseResult(result);
				});
				var url2 = "GoodsInfo/getGoodsPics";
				$.getJSON(url2, id, function(result2) {
					doHandleResponseResult2(result2);
				});
				var url3 = "GoodsInfo/getGoodsBrand";
				$.getJSON(url3, id, function(result3) {
					doHandleResponseResult3(result3);
				});
				var url4 = "GoodsInfo/getGoodsSpecs";
				$.getJSON(url4, id, function(result4) {
					doHandleResponseResult4(result4);
				});

			}
			
			function getQueryVariable(variable){
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){
			            	   return pair[1];
			               }
			       }
			       return(false);
			}
			function doHandleResponseResult(result) { //JsonResult
				if (result.state == 1) {//ok
					$(".goodsname").html(result.data.goods_name);
					$(".products-desc").html(result.data.goods_info);
					$(".goodsdesription").html(result.data.goods_content);
					specsid=result.data.specs_id;
					console.log(specsid);
				} else {
					alert(result.msg);
				}
			}

			function doHandleResponseResult2(result) { //JsonResult
				if (result.state == 1) {
					var tbody = $(".product-thumb-carousel");
					tbody.empty();
					for(var i in result.data){
						var p = "<div class='single-thumb-item'>"+
						"<a><img class='img-fluid' src='assets/imageResource/"+result.data[i].pic_name+"' alt='Product' /></a>"+
						"</div>";
						tbody.append(p);
					}
				} else {
					alert(result.msg);
				}
			}

			function doHandleResponseResult3(result) { //JsonResult
				if (result.state == 1) {//ok
					$(".product-stock-status").html(result.data.brand_name);
					$(".product-sku-status").html(result.data.category_name);
				} else {
					alert(result.msg);
				}
			}

			function doHandleResponseResult4(result) {
				if (result.state == 1) {//ok
					//console.log(result.data);	
					//  var array=new Array();
					var specs = $(".shopping-option-item");
					specs.empty();
					for ( var i in result.data) {
						var h4 = $('<h4 style="margin-top:2%">'
								+ result.data[i][0].prop_name + '</h4>');
						var ul = $('<ul class="color-option-select d-flex"></ul>');
						//console.log(result.data[i]);
						specs.append(h4);
						specs.append(ul);
						for ( var j in result.data[i]) {
							//console.log(result.data[i][j]);
							//array[j]=result.data[i][j].prop_val;
							//console.log(array[j]);
							if (result.data[i][j].prop_name == "颜色") {

								var str = result.data[i][j].prop_val.split("#");
								var color_text = str[0];
								var color_rgb = "#" + str[1];
								console.log(color_rgb);
								
								var li = $('<li class="color-item" style="background:'+color_rgb+'"></li>');
								var div = $('<div class="color-hvr" ></div>');
								var span_colortext = '<span class="color-name">'
										+ color_text + '</span>';
								ul.append(li);
								li.append(div);
								div.append(span_colortext);
							} else {
								var li = $('<li class="list-inline checkval" style="margin-right:3%; font-weight:bold;font-size:1em; border:3px solid #DCDCDC;padding:0.5%" >'
										+ result.data[i][j].prop_val + '</li>');
								ul.append(li);
							}
						}
					}
					checkSpecs();
				} else {
					alert(result.msg);
				}
			}
			
			function checkSpecs() {
				$(".color-item").click(function() {
					$(this).siblings('.color-item').css({
							"border" : "0px"
						});
						; // 删除其他li的边框样式
					$(this).css({
							"border" : "4px solid white"
						});// 为当前li添加边框样式
					//$(this).
				})				
				$(".checkval").click(function() {
					$(this).siblings('.checkval').css({
							"background" : "white"
						});
						; // 删除其他li的边框样式
						$(this).css({
							"background" : "#DCDCDC"
					}); // 为当前li添加边框样式
				})
			}

	
		
		
		});
	</script>

		
</body>
</html>
